<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <div class="left">
          <el-progress
            type="circle"
            :percentage="percentage"
            :width="150"
            :stroke-width="20"
            stroke-linecap="butt"
            :color="'#F56C6C'"
          ></el-progress>
          <div class="p-title">{{ currentRow === null?'60%以上':currentRow.coverageRatio }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="data"
          style="width: 100%"
          @cell-mouse-enter="setProgress"
        >
          <el-table-column
            label="覆盖率"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color: '#FFF',
                  display: 'inline-block',
                  backgroundColor: rankNumType[scope.$index]?rankNumType[scope.$index]:'#ccc',
                  height: size,
                  width: size,
                  lineHeight: size,
                  textAlign: 'center',
                  borderRadius: '50%'}"
              >
              </span>
              {{ scope.row.coverageRatio }}
            </template>
          </el-table-column>
          <el-table-column
            label="人数"
          >
            <template slot-scope="scope">
              {{ scope.row.population }}
            </template>
          </el-table-column>
          <el-table-column
            label="占比"
          >
            <template slot-scope="scope">
              {{ scope.row.ratio }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DirectChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rankNumType: ['#EC7E65', '#FF974A', '#72A0FB', '#FFA48F', '#31AEFF', '#B272FB'],
      size: '10px',
      currentRow: null
    }
  },
  computed: {
    percentage() {
      if (this.currentRow === null) {
        return this.data.length === 0 ? 0 : this.data[0].ratio.slice(0, this.data[0].ratio.length - 1) - 0
      } else {
        return this.currentRow.ratio.slice(0,this.currentRow.ratio.length - 1) - 0
      }
    }
  },
  methods: {
    setProgress(row) {
      this.currentRow = row
    }
  }
}
</script>

<style lang="less" scoped>
.el-row, .el-col {
  height: 100%;

}

.left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .p-title {
    font-size: 12px;
    transform: translateY(-480%);

  }

}
</style>
